/*

    行业资讯


 */


main {
  margin-top: 20px;
  background-color: #f8fbfc;
  /* 版心 */

  .main-box {

    //display: flex;
    //justify-content: space-between;

    .mb-left {
      //flex: 0 0 157px;
      width: 157px;
      float: left;
      margin-right: 12px;
      background-color: #fff;
      //background-color: #ffd3de;
      padding-bottom: 20px;

      .mbl-nav {
        li {
          height: 50px;

          a {
            display: block;
            width: 100%;
            height: 100%;
            font-size: 16px;
            color: #1e2629;
            text-align: center;
            line-height: 50px;

            i {
              margin-right: 5px;
            }

            &.mbln-active {
              box-shadow: 0 0 6px rgba(0, 0, 0, .1);
              color: #ec664e;
            }

            &:hover {
              box-shadow: 0 0 6px rgba(0, 0, 0, .1);
              color: #ec664e;
            }
          }
        }
      }

      p {
        text-align: center;
        font-size: 12px;
        color: #477eff;
        margin-top: 39px;
        margin-bottom: 9px;
      }

      .qrcode {
        width: 104px;
        height: 104px;
        margin: 0 auto;

        a {
          display: block;
          width: 100%;
          height: 100%;

          img {
            display: block;
            width: 100%;
          }
        }
      }
    }

    .mb-mid {
      //flex: 0 0 715px;
      width: 715px;
      float: left;
      //height: 100px;
      //background-color: #8bb1ff;
      /* 轮播图预留位置 */

      .banner {
        width: 715px;
        height: 243px;
        margin-bottom: 20px;
      }

      /* 文章 */

      .article {
        li {
          width: 715px;
          height: 175px;
          background-color: #ffffff;
          border: solid 1px #e8eeee;
          margin-bottom: 20px;

          a {
            width: 100%;
            height: 100%;
            padding-left: 20px;
            padding-right: 26px;
            display: flex;
            justify-content: space-between;

            img {
              flex: 0 0 242px;
              height: 151px;
              margin-top: 12px;
              border-radius: 10px;
            }

            .msg {
              flex: 0 0 406px;
              padding-top: 21px;

              h2 {
                font-size: 20px;
                color: #1e2629;
              }

              .msg-label {
                width: 51px;
                height: 19px;
                border-radius: 9px;
                border: solid 1px #ff1734;
                color: #ff0b0f;
                line-height: 18px;
                text-align: center;
                margin-top: 3px;
                margin-bottom: 9px;
              }

              .cont {
                font-size: 14px;
                color: #4f646a;
                width: 406px;
              }

              .view {
                span {
                  text-align: left;
                  line-height: 24px;
                  color: #8aa0a6;

                  &:nth-of-type(1) {

                    i {
                      vertical-align: middle;
                      margin: 10px;
                    }
                  }

                  &:nth-of-type(2) {
                    float: right;
                  }
                }
              }

            }
          }
        }
      }
    }

    .mb-right {
      //flex: 0 0 307px;
      //height: 100px;
      width: 307px;
      float: right;
      //background-color: #8effa9;

      /* 最新资讯 */

      .mr-news {
        width: 100%;
        border: 1px solid #c2d1d2;
        background: #fff;
        //margin-top: 21px;
        padding: 7px 6px 8px 6px;
        margin-bottom: 20px;

        .mrn-title {
          height: 68px;

          background: url("../images/problem/news_title.png") no-repeat center center;
          background-size: contain;
        }

        ul {
          padding-left: 18px;
          padding-right: 18px;
          margin-top: 18px;

          li {
            width: 260px;
            font-size: 16px;
            color: #4f646a;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
            position: relative;
            margin-bottom: 10px;

            &:nth-child(-n+3) {
              &:before {
                background-color: #f32222;
              }
            }

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background-color: #4f646a;
            }

            a {
              padding-left: 15px;

              &:hover {
                color: #f32222;
              }
            }
          }
        }
      }

      /* 品牌故事 */

      .story {
        border-width: 4px 1px 1px 1px;
        border-style: solid;
        border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
        padding-left: 18px;
        padding-right: 14px;
        padding-bottom: 18px;
        /* 品牌标题 */

        .story-title {
          margin-top: 22px;
          margin-bottom: 15px;
          padding-bottom: 26px;
          height: 35px;
          background: url("../images/info/story_title_img.png") no-repeat center center;
          background-size: contain;
        }

        .brand-box {
          display: flex;
          justify-content: space-between;
          flex-flow: row wrap;

          li {
            flex: 0 0 132px;
            margin-bottom: 8px;

            a {
              display: block;
              width: 100%;
              height: 100%;



              img {
                display: block;
                width: 100%;
                &:hover{
                  transform: scale(1.01);
                }
              }
            }
          }
        }
      }


      /* 最新案例 */

      .case {
        padding-top: 23px;
        padding-left: 17px;
        padding-right: 13px;
        width: 306px;
        padding-bottom: 20px;
        //background-color: pink;
        margin-top: 30px;
        margin-bottom: 23px;
        border-width: 4px 1px 1px 1px;
        border-style: solid;
        border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
        /* 标题 */

        .selqa-title {
          height: 37px;
          background: url("../images/info/new-case-title-img.png") no-repeat center center;
          background-size: contain;
          margin-bottom: 12px;
        }

        .sel-nav {
          border-top: 1px solid #eaeaea;
          padding-top: 25px;
          padding-left: 8px;
          padding-right: 4px;

          li {
            position: relative;
            padding-left: 20px;


            margin-bottom: 10px;

            a {
              display: block;
              width: 100%;
              height: 100%;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font-size: 16px;
              color: #4f646a;
            }

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background-color: #4f646a;
            }

            &:nth-of-type(-n+3) {
              &::before {
                background-color: #e71f19;
              }
            }

            &:hover {
              a {
                color: #e71f19;

              }

              &::before {
                background-color: #e71f19;
              }
            }
          }
        }
      }

      /* 人物专访 */

      .interview {
        padding-top: 23px;
        padding-left: 17px;
        padding-right: 13px;
        width: 306px;
        padding-bottom: 20px;
        //background-color: pink;
        margin-top: 30px;
        margin-bottom: 23px;
        border-width: 4px 1px 1px 1px;
        border-style: solid;
        border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
        /* 标题 */

        .interview-title {
          height: 37px;
          background: url("../images/info/interview_title_img.png") no-repeat center center;
          background-size: contain;
          margin-bottom: 30px;
        }

        img {
          width: 270px;
          height: 168px;
          background-color: #000000;
          border-radius: 5px;
          display: block;
        }

        .interview-nav {
          margin-top: 31px;

          li {
            position: relative;
            padding-left: 20px;


            margin-bottom: 10px;

            a {
              display: block;
              width: 100%;
              height: 100%;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font-size: 16px;
              color: #4f646a;
            }

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background-color: #4f646a;
            }

            &:nth-of-type(-n+3) {
              &::before {
                background-color: #e71f19;
              }
            }

            &:hover {
              a {
                color: #e71f19;

              }

              &::before {
                background-color: #e71f19;
              }
            }
          }
        }
      }
    }
  }
}

/* 新闻内页部分 */
article {
  width: 707px!important;
  background-color: transparent;
  margin-bottom: 24px;

  .article-box {
    //height: 500px;
    background-color: #fff;
    border-top: 1px solid transparent;
    padding-bottom: 47px;
    padding-left: 32px;
    padding-right: 38px;
    margin-bottom: 46px;

    h1 {
      text-align: center;
      font-size: 18px;
      color: #1e2629;
      margin-top: 23px;
    }

    .time-from {
      width: 184px;
      margin: 31px auto 39px auto;

      span {
        color: #4f646a;

        &:nth-of-type(1) {

        }

        &:nth-of-type(2) {
          float: right;
        }
      }
    }

    .content {
      border-bottom: 1px solid #ddd;
      margin-bottom: 47px;
      p {
        text-indent: 2em;
        font-size: 16px;
        color: #1e2629;
        margin-bottom: 32px;
        line-height: 25px;
      }

      img {
        text-align: center;
        display: block;
        margin: 0 auto 40px auto;
      }
    }

    .share{
      .share-left{
        float: left;
        span{
          vertical-align: middle;
          font-size: 16px;
          color: #4f646a;
        }
        a{
          display: inline-block;
          width: 18px;
          height: 18px;
          vertical-align: middle;
          margin-right: 13px;
          img{
            display: inline-block;
            width: 18px;
            height: 18px;
            vertical-align: middle;
          }
        }
      }
      .share-right{
        float: right; width: 101px;
        height: 36px;
        border-radius: 18px;
        border: solid 1px #ff0b0f;
        a{
          display: block;
          width: 100%;
          height: 100%;
          font-size: 16px;
          color: #ff0b0f;
          line-height: 35px;
          text-align: center;
        }
        &:hover{
          background-color: #ff0b0f;
         a{
           color: #fff;
         }
        }
      }
    }

    .customer-service {
      display: block;
      width: 707px;
      height: 78px;
      img{
        display: block;
        width: 100%;
      }
    }
  }
}
